<template>
  <my-div class="transfer">
     <head>
      <div slot="right" style="width: 36;height: 36">
        <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
      </div>
    </head>
    <scroller :show-scrollbar="false">
      <my-div class="transfer-choose">
        <text class="transfer-title">{{$t('wallet.change_into')}}</text>
        <div class="choose-currency">
          <text class="currency-name">{{current_wallet_type}}</text>
          <div class="currency-wrapper" @click="isBottomShow=true">
            <text class="choose-label">{{$t('wallet.choose_type')}}</text>
            <image style="width:18px;height:32px;margin-left:14px;" src="root:img/home/right@2x.png"></image>
          </div>
        </div>
      </my-div>
      <my-div class="erweima-wrapper">
        <image ref="poster" :src="qrcode" style="width:298px;height:298px;margin-top:90px;"></image>
        <div class="save-box" @click="save_qrcode(true)">
          <text class="save-erweima">{{$t('wallet.save_photo')}}</text>
        </div>
        <text class="currency-address">{{$t('wallet.coin_address')}}</text>
        <text class="currency-dec" ref="copy" >{{accountId}}</text>
        <text class="currency-copy" @click="copy">{{$t('wallet.copy')}}</text>
      </my-div>
      <div>
        <text class="transfer-attention">{{$t('wallet.chargealerts')}}</text>
      </div>
    </scroller>
    <wxc-popup :have-overlay="isTrue"
                 :show="isBottomShow"
                 @wxcPopupOverlayClicked="popupOverlayBottomClick"
                 pos="bottom"
                 height="400">
        <div class="wallet-types">
          <wxc-radio :list="wallet_types" :config="config" @wxcRadioListChecked="wxcRadioListChecked"></wxc-radio>
        </div>
      </wxc-popup>

  </my-div>
</template>

<script>
const clipboard = weex.requireModule('clipboard')
const net = require('../../utils/http.js')
import { WxcPopup,WxcRadio } from 'weex-ui';
export default {
  name: '',
  data() {
    return {
      qrcode:'',
      message:'Newsgd.com is the premier online source of Guangdong news and information, fully displaying Guangdong through channels including Guangdong News, Guangdong',
      wallet_types:[],
      current_wallet_type:'ADA',
      config:{
         checkedColor: 'rgba(60,71,98,1)'
      },
      accountId:'',
      isBottomShow:false
    }
  },
  components: {WxcPopup,WxcRadio},
  created() {
    var globalEvent = weex.requireModule('globalEvent');
    var nav = weex.requireModule('navigator')
    globalEvent.addEventListener("onPageInit", () => {
      const param = nav.param()
      if(!param) return 
      this.current_wallet_type = param.name 
      this.accountId = this.current_wallet.account_id
      const wallet_types = param.wallet_types
      wallet_types.forEach(item => {
           this.wallet_types.push({
             title:item.name,
             value:item.name
           })
        });
      this.save_qrcode(false)
      this.qrcode = this.get_qrcode()
    })
  },
  methods: {
    copy(){
      clipboard.setString(this.message)
      this.toast('复制成功')
    },
    popupOverlayBottomClick () {
        this.isBottomShow = false;
    },
     wxcRadioListChecked(e){
      this.current_wallet_type = e.value
    },
    save_qrcode(flag){
      const progress = weex.requireModule('progress');
      const $image = this.$refs.poster
      if(flag){
        progress.showFull('保存中...',true)
        }
      $image.save(result => {
         progress.dismiss()
        if (result.success) {
          // Do something to hanlde success
          this.toast('保存成功')
        } else {
          if(!flag) return 
          this.toast('保存失败')
          // Do something to hanlde failure
        }
      })
    },
    get_wallet_types(){
      net.getSilent('wallet/listWalletTypes',{},(res)=>{
        const list = res.result
        this.alert(list)
        list.forEach(item => {
           this.wallet_types.push({
             title:item.name,
             value:item.name
           })
        });
      })
    },
    get_qrcode(){
      return `http://140.143.247.204:8082/app/wallet/qr?code=${this.current_wallet.account_id}`
    },
    get_charge_address(){
      const account = this.pref.get('account')
      const current_user_key = this.pref.get('current_user_key')
      const p = {
        walletName:'',
        accountId:''
      }
      // this.$http.getSilent('wallet/getUserTraceAddress',p,(res)=>{

      // })
    }
  }
}
</script>
<style scoped>
.transfer-choose{
  width: 720px;
  padding-left: 30px;
  height: 246px;
  background-color: rgba(255,255,255,1);
}
.transfer-title{
  margin-top: 24px;
  font-size: 48px;
  font-family: PingFang SC;
  color: rgba(70,120,245,1);
  margin-bottom: 40px;
}
.choose-currency{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 690px;
  height: 90px;
  border-radius: 10px;
  background-color: rgba(245,246,249,1);
}
.currency-name{
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  margin-left: 20px;
}
.currency-wrapper{
  display: flex;
  flex-direction: row;
  margin-right: 20px;
}
.choose-label{
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
}
.erweima-wrapper{
  width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(245,246,249,1);
}
.save-box{
  width: 270px;
  height: 60px;
  border-radius: 10px;
  margin-top: 20px;
  background-color: rgba(70,120,245,.1);
}
.save-erweima{
  font-size: 28px;
  text-align: center;
  font-family: PingFang SC;
  color: rgba(70,120,245,1);
  line-height: 60px;
}
.currency-address{
  margin-top: 60px;
  margin-bottom: 18px;
  font-size: 24px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
}
.currency-dec{
  text-align: center;
  lines:4;
  width: 500px;
  height: 120px;
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(60,71,98,1);
  line-height: 30px;
}
.currency-copy{
  width: 140px;
  height: 60px;
  margin-top: 20px;
  margin-bottom: 56px;
  font-size: 28px;
  color: rgba(60,71,98,1);
  background-color: rgba(60,71,98,0.1);
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
}
.currency-copy:active{
  color: rgba(70,120,245,1);
}
.transfer-attention{
  width: 690px;
  height: 320px;
  font-size: 20px;
  font-family: PingFang SC;
  color: rgba(154,156,164,1);
  line-height: 36px;
  margin-top: 56px;
  margin-left: 30px;
}
</style>
